<span page-title ng-model="activationKey">{{ 'Subscriptions for Activation Key:' | translate }} {{ activationKey.name }}</span>

<section>
  <h4 translate>Subscription Details</h4>
  <div class="details">
    <span class="info-label" translate>Auto-Attach</span>
    <span class="info-value" ng-if="simpleContentAccessEnabled" translate>Not Applicable</span>
    <span class="info-value"
      ng-if="!simpleContentAccessEnabled"
      bst-edit-select="activationKey.auto_attach"
      selector="activationKey.auto_attach"
      options="autoAttachOptions()"
      formatter="booleanToYesNo"
      readonly="denied('edit_activation_keys', activationKey)"
      on-save="save(activationKey)">
    </span>
  </div>
  <p bst-alert="info" ng-hide="simpleContentAccessEnabled || !activationKey.auto_attach">
    <span>When Auto Attach is enabled, registering systems will be attached to all associated custom products and only associated Red Hat subscriptions required to satisfy the system's installed products.</span>
  </p>
  <p bst-alert="info" ng-hide="simpleContentAccessEnabled || activationKey.auto_attach">
    <span translate>When Auto Attach is disabled, registering systems will be attached to all associated subscriptions.</span>
  </p>
</section>

<nav>
  <ul class="nav nav-tabs nav-tabs-pf" ng-show="permitted('edit_activation_keys', activationKey)">
    <li ng-class="{active: isState('activation-key.subscriptions.list')}">
      <a ui-sref="activation-key.subscriptions.list">
        <!-- TODO: other pages too - label "List" vs. "List/Remove" based on edit permissions -->
        <span translate>
          List/Remove
        </span>
      </a>
    </li>

    <!-- TODO: permissions? ng-show="activationKey.permissions.editable" -->
    <li ng-class="{active: stateIncludes('activation-key.subscriptions.add')}">
      <a ui-sref="activation-key.subscriptions.add">
        <span translate>
          Add
        </span>
      </a>
    </li>
  </ul>
</nav>

<div ui-view></div>
